<template>
    <div class='home'>
        <header>我是头</header>
        <main>
            <router-view/>
        </main>
        <footer>
            <router-link to = '/home/homes'>主页</router-link>
            <router-link to = '/home/car'>购物车</router-link>
            <router-link to = '/home/my'>我的</router-link>
        </footer>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .home{
        width:100%;
        height:100%;
        display:flex; 
        flex-direction: column;
    }

    header{
        height:50px;
    }

    main{
        flex:1;
        overflow:auto;
    }

    footer{
        height:50px;
        display:flex;
        justify-content: space-around;
        align-items:center;
    }

    footer a{
        color:black;
        text-decoration:none;
    }

    .router-link-active{
        color:red;
    }
</style>